<template>
	<view class="supporter-page">
		<u-sticky :bgColor="scrollTop > 20?'#110124':'transparent'" customNavHeight="0" offsetTop="0" class="z-index">
			<u-navbar :title="$t('hhh.t211')" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
				:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>

			<u-gap height="150" bgColor="transparent"></u-gap>
			<view class="flex align-center bgrgba1 rounded-circle h-68 justify-between px-1 dateTab">
				<view class="text-white fs-28 font-weight-light dateTabitem rounded-circle  text-center"
					v-for="(item,index) in dateTab" :key="index" :class="currentDateName === item.type?'bg110124':''"
					@tap="changeDateTab(item)">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bgColor="transparent"></u-gap>
		</u-sticky>
		<view class="support-list">
			<u-gap height="100" bgColor="transparent"></u-gap>
			<view class="clearfix position-relative">
				<view class="topbox position-absolute top-one">
					<view class="border bdcolor2 rounded-circle avatar1 flex align-center justify-center mx-auto">
						<view class="border bdcolor3 rounded-circle avatar2 flex align-center justify-center">
							<image src="/static/imgs/player1.jpg" mode="aspectFill" class="rounded-circle avatar3"></image>
						</view>
					</view>
					<view class="text-white fs-28 font-weight-bold text-center">茉莉奶绿</view>
					<view class="fs-24 text-black font-weight-light flex align-center justify-center mt-2">567890 <image
							src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
					</view>
				</view>

				<view class="topbox float-left mt-5 ml-3">
					<view class="border bdcolor2 rounded-circle avatar1 flex align-center justify-center mx-auto">
						<view class="border bdcolor3 rounded-circle avatar2 flex align-center justify-center">
							<image src="/static/imgs/player1.jpg" mode="aspectFill" class="rounded-circle avatar3"></image>
						</view>
					</view>
					<view class="text-white fs-28 font-weight-bold text-center">茉莉奶绿</view>
					<view class="fs-24 text-black font-weight-light flex align-center justify-center mt-2">567890 <image
							src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
					</view>
				</view>

				<view class="topbox float-right mt-5 mr-3">
					<view class="border bdcolor2 rounded-circle avatar1 flex align-center justify-center mx-auto">
						<view class="border bdcolor3 rounded-circle avatar2 flex align-center justify-center">
							<image src="/static/imgs/player1.jpg" mode="aspectFill" class="rounded-circle avatar3"></image>
						</view>
					</view>
					<view class="text-white fs-28 font-weight-bold text-center">茉莉奶绿</view>
					<view class="fs-24 text-black font-weight-light flex align-center justify-center mt-2">567890 <image
							src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
					</view>
				</view>
			</view>
			<u-gap height="160" bgColor="transparent"></u-gap>
			<view class="rounded-lg bg-white p-3">
				<view v-for="item in 10" :key="item" class="flex align-center bgF3F5FA mb-2 p-2 rounded-lg">
					<text class="ft574C70 fs-28 font-weight-bold">{{item + 3}}</text>
					<image src="/static/imgs/player1.jpg" mode="aspectFill" class="rounded-circle mx-2"
						style="width: 88rpx;height: 88rpx;"></image>
					<text class="fs-28 font-weight-bold text-black flex-1">Marora</text>
					<text class="ft2C0B53 fs-24 font-weight-bold">265411</text>
					<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDateName: 1,
				scrollTop: 0
			}
		},
		computed: {
			dateTab() {
				return [{
						name: this.$t('hhh.t154'),
						type: 1
					},
					{
						name: this.$t('hhh.t155'),
						type: 2
					},
					{
						name: this.$t('hhh.t156'),
						type: 3
					},
				]
			},
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			changeDateTab(item) {
				this.currentDateName = item.type
			}
		}
	}
</script>

<style lang="scss">
	.supporter-page {
		background-image: url('/static/imgs/supporterbg.png');
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: center top;

		.dateTab {
			margin: 0 108rpx;
		}

		.dateTabitem {
			width: 30%;
			height: 56rpx;
			line-height: 56rpx;
		}

		.support-list {
			.topbox {
				width: 254rpx;
			}

			.top-one {
				left: 50%;
				transform: translateX(-127rpx);
			}

			.avatar1 {
				width: 172rpx;
				height: 172rpx;
			}

			.avatar2 {
				width: 140rpx;
				height: 140rpx;
			}

			.avatar3 {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
</style>